<template>
  <div>

    <div class="button-row">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    
    {{ person.firstName }} {{ person.lastName }}
    <div>
      {{ fullName }}
    </div>

    <button @click="updateComputed">修改计算属性</button>
    <button @click="update">修改名字</button>

    <div>购物</div>

    <div>
      <div v-for="item in state.list">
        {{ item.name }} {{ item.price }} 数量 {{ item.num }}
      </div>
    </div>

    <div>
      总价：{{ totalPrice }} 总数：{{ totalCount }}
    </div>
    <button @click="add">添加到购物车</button>

    <div>
      ------------------watch-----------------------------------
    </div>

    {{ key }}

    <input type="text" v-model="key">

    <div>
       {{ userInfo.name }}
    </div>



    ----------watch reactive数据-----------

    <div>
      {{ company.id }}{{ company.name }} {{ company.info.address }}
    </div>
    <button @click="updateUser">修改数据</button>

  </div>

</template>
<script setup>
import { computed, reactive, ref, watch, watchEffect } from 'vue';



const person = reactive({
  firstName: '张',
  lastName: '三',
  age: 18
})
const state = reactive({
  list: [{ name: "苹果", price: 10, num: 2 }, { name: "香蕉", price: 20, num: 5 }]
})

const totalPrice = computed(() => {

  return state.list.reduce((pre, cur) => {
    return pre + cur.price
  }, 0)

})

const totalCount = computed(() => {
  return state.list.reduce((pre, cur) => {
    return pre + cur.num
  }, 0)
})

//  const fullName=  computed(()=>{
//     return person.firstName +"."+ person.lastName
//   })
//完整写法
const fullName = computed({
  get() {
    return person.firstName + "." + person.lastName
  },
  set(value) {
    const names = value.split(".")
    person.firstName = names[0]
    person.lastName = names[1]
  }
});

const updateComputed = () => {

  fullName.value = "王.老五"

}

const add = () => {
  state.list.push({ name: "橘子", price: 50, num: 1 })
}

const update = () => {
  person.firstName = '王'
}


//watch 监听 ref
const key = ref("你好");

const userInfo=ref({
  name: "老王",
  age:18
});

const company = reactive({
  name: "百度",
  id:100,
  info:{address:"北京西二旗"}
})
 


// watch(key, (newValue, oldValue) => {
//   console.log("新的值", newValue);
//   console.log("旧的值", oldValue);
//   //写业务逻辑

// }, {})

// watch(userInfo,(newValue,oldValue)=>{

//   console.log("新的值1111", newValue);
//   console.log("旧的值1111", oldValue);
//   //写业务逻辑

// },{deep:true,immediate:true})

//深度监听deep:true  立即监听： immediate:true   组件初始化就监听

//同时监听多个数据

// watch([userInfo,key],(newValue,oldValue)=>{ 

//     console.log("新的值1111", newValue);
//   console.log("旧的值1111", oldValue);

// },{deep:true})

//监听对象的某个属性
// watch(()=>userInfo.value.name,(newValue,oldValue)=>{ 

//     console.log("新的值1111", newValue);
//   console.log("旧的值1111", oldValue);

// },{deep:true})

//监听 reactive 数据
// watch(company,(newValue,oldValue)=>{

//   console.log("新的值1111", newValue);
//   console.log("旧的值", oldValue);
// } )

//监听 某个 属性
// watch([()=>company.name,()=>company.id],(newValue,oldValue)=>{

// console.log("新的值1111", newValue);
// console.log("旧的值", oldValue);
// } )


// watch(()=>company.info,(newValue,oldValue)=>{

//  console.log("新的值1111", newValue);
//  console.log("旧的值", oldValue);
//  },{deep:true} )

const updateUser=()=>{

  //userInfo.value={id:1,name:"赵六"}  //不需深度监听
   //userInfo.value.name="赵六";

  // key.value="key1";

  // company.name="阿里";
  // company.id=20000;
  company.info.address="北京海淀区";
}

watchEffect(()=>{

  let address=company.info.address;
 let _userinfo=userInfo.value.name;

 //业务逻辑

 console.log(address);
 console.log(_userinfo);
   


})



</script>
